{% extends "base.html" %}

{% block title %}语音识别测试{% endblock %}

{% block sidebar %}
<div class="list-group">
    <a href="{{ url_for('audio_monitor') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_monitor' %}active{% endif %}"><i class="bi bi-mic"></i> 声音监控</a>
    <a href="{{ url_for('audio_wake') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_wake' %}active{% endif %}"><i class="bi bi-mic-fill"></i> 语音唤醒</a>
    <a href="{{ url_for('audio_tts') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_tts' %}active{% endif %}"><i class="bi bi-chat-text"></i> 语音合成</a>
    <a href="{{ url_for('audio_test') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_test' %}active{% endif %}"><i class="bi bi-volume-up"></i> 播放测试</a>
    <a href="{{ url_for('audio_speak_test') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_speak_test' %}active{% endif %}"><i class="bi bi-mic"></i> 语音识别</a>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid px-2">
    <div class="row">
        {# <div class="col-md-3">
            <!-- 可放置说明或识别设置 -->
        </div> #}
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="mb-0">语音识别测试</h4>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <button class="btn btn-primary" id="startRecordBtn"><i class="bi bi-mic"></i> 开始录音并识别</button>
                        <button class="btn btn-secondary" id="stopRecordBtn" disabled><i class="bi bi-stop-circle"></i> 停止录音</button>
                    </div>
                    <div class="mb-3">
                        <label for="audioFile" class="form-label">上传音频文件（wav/mp3）：</label>
                        <input type="file" class="form-control" id="audioFile" accept="audio/*">
                        <button class="btn btn-success mt-2" id="uploadBtn">上传并识别</button>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">识别结果：</label>
                        <textarea class="form-control" id="resultText" rows="4" readonly></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let mediaRecorder;
let audioChunks = [];

const startBtn = document.getElementById('startRecordBtn');
const stopBtn = document.getElementById('stopRecordBtn');
const resultText = document.getElementById('resultText');

startBtn.onclick = async function() {
    audioChunks = [];
    resultText.value = '';
    startBtn.disabled = true;
    stopBtn.disabled = false;
    if (!navigator.mediaDevices) {
        alert('当前浏览器不支持麦克风录音');
        return;
    }
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();
    mediaRecorder.ondataavailable = e => {
        audioChunks.push(e.data);
    };
    mediaRecorder.onstop = async () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
        const formData = new FormData();
        formData.append('audio', audioBlob, 'record.wav');
        resultText.value = '识别中...';
        const resp = await fetch('/api/speech_recognize', {
            method: 'POST',
            body: formData
        });
        const data = await resp.json();
        resultText.value = data.text || data.error || '识别失败';
    };
};

stopBtn.onclick = function() {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        startBtn.disabled = false;
        stopBtn.disabled = true;
    }
};

document.getElementById('uploadBtn').onclick = async function() {
    const fileInput = document.getElementById('audioFile');
    if (!fileInput.files.length) {
        alert('请先选择音频文件');
        return;
    }
    const formData = new FormData();
    formData.append('audio', fileInput.files[0]);
    resultText.value = '识别中...';
    const resp = await fetch('/api/speech_recognize', {
        method: 'POST',
        body: formData
    });
    const data = await resp.json();
    resultText.value = data.text || data.error || '识别失败';
};
</script>
{% endblock %} 